import { useState, useEffect, useRef } from "react";
import { Form, Button, Select, Checkbox, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import PrintModal from "@/pages/StorageModule/sortFrame/common/component/PrintModal";
import { getSortingDoneNum, getExpressCompanyByOutboundNoListOp } from '../service';

const { Option } = Select;

const DeliverOrder = ({ mainWarehould, warehouseList = [], handlePrint, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [printVisible, setPrintVisible] = useState(false); //打印弹窗
	const [expressList, setExpressList] = useState([]);
	const [outboundNoList, setOutboundNoList] = useState([]);
	const [warehouseId, setWarehouseId] = useState(mainWarehould);

	const sortType = useRef(1);

	useEffect(() => {
		warehouseId && getDataSoure();
	}, [warehouseId])

	const getDataSoure = async () => {
		const response = await getSortingDoneNum({ warehouseId });
		if (response.success) {
			setOutboundNoList(response.data);
		}
	}

	const onOk = () => {
		sortType.current = form.getFieldsValue()?.sortType;
		handleGetExpressList();
	};

	const handleGetExpressList = async () => {
		const arr = outboundNoList.map(item => item.outboundNo);
		START_LOADING();
		const { data, success } = await getExpressCompanyByOutboundNoListOp(arr);
		END_LOADING();
		if (success && data?.length) {
			setExpressList(data);
			setPrintVisible(true);
		}
	}

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	const PrintModalProps = {
		visible: printVisible,
		outboundNoList,
		expressList,
		deliverType: 8,
		sortType: sortType.current,
		handlePrint,
		handleOk,
		handleCancel() {
			setPrintVisible(false);
		},
	};

	return (
		<CommonModal
			title={{ title: "发货已配齐订单" }}
			// okText={"打印面单"}
			width="456px"
			visible={true}
			onOk={onOk}
			footer={
				<div style={{ textAlign: "right" }}>
					<Button size="middle" onClick={onCancel}>
						取消
					</Button>
					<Button size="middle" type="primary" onClick={onOk} disabled={!outboundNoList?.length}>
						打印面单
					</Button>
				</div>
			}
			onCancel={onCancel}
			minHeight="150px"
		>

			<Form form={form} name="mark-unuaual-modal" style={{ marginTop: "12px" }} initialValues={{ sortType: 1, warehouseId: mainWarehould }}>
				<Form.Item name='warehouseId' label="仓库" rules={[{ required: 'true' }]}>
					<Select onChange={e => setWarehouseId(e)}>
						{
							warehouseList.map(item => <Option key={item.id} value={item.id}>{item.warehouseName}</Option>)
						}
					</Select>
				</Form.Item>
				<div style={{ textIndent: '18px', marginBottom:'12px' }}>
					<p style={{ fontSize: '15px', marginBottom: '12px' }}>是否发货所有已配齐的订单？</p>
					<div>
						本次将打印的订单数：<span className={"common-color9"}>{outboundNoList?.length}</span>
					</div>
				</div>
				<Form.Item name='sortType' label="批量打印出单顺序" rules={[{ required: 'true' }]}>
					<Select>
						<Option key={1} value={1}>分拣墙排序</Option>
						<Option key={2} value={2}>分拣框排序</Option>
					</Select>
				</Form.Item>
			</Form>
			<div className="common-color9" style={{ fontSize: "12px" }}>
				<p>注：</p>
				<p>1、分拣墙排序为从A到Z的顺序，当前分拣墙打印完，再打印下个分拣墙数据以此类推</p>
				<p>2、分拣框排序为从1往后排，优先打印所有分拣墙1号分拣框，打印完再打印2号框以此类推</p>
			</div>
			{printVisible && <PrintModal {...PrintModalProps} />}
		</CommonModal>
	);
};

export default DeliverOrder;
